2.2-RN 基本元素

Create by fall on 25 Apr 2024 Recently revised in 26 Nov 2024

基本元素

Text

• 行内元素：<Text>，最接近 p 元素
• 块元素：<View>，最接近 div 元素

并且支持相当一部分内容，一些库支持 React Native 版本，例如 Material、tailwind-rn

import React from 'react';
import { Text, TextInput, View } from 'react-native';

const Cat = (props) => {
  return (
    <View>
      <Text>Hello, I am {props.name}!</Text>
    </View>
  );
}

const Cafe = () => {
  return (
    <View>
      <TextInput></TextInput>
      <Cat name="Maru" />
      <Cat name="Jellylorum" />
      <Cat name="Spot" />
    </View>
  );
}

export default Cafe;

ScrollView

最接近 web 标签：<div>

参数：

• horizontal（水平滚动）
• pagingEnabled（允许滑动手势对视图进行分页）

iOS：含单个子元素的 ScrollViews 可以允许用户对内容进行缩放。通过设置 maximumZoomScale 和 minimumZoomScale 两者的属性, 您的用户能够利用捏合以及扩大手势来放大或缩小。

特性：放置在 ScrollView 中的所有组件都会被渲染，哪怕有些组件因为内容太长被挤出了屏幕外。

较长的列表：性能更好的 FlatList 组件

示例

import React from 'react';
import { Image, ScrollView, Text } from 'react-native';
export default App = () =>  (
<ScrollView>
   <Text style={{ fontSize: 96 }}>Scroll me plz</Text>
   <Text style={{ fontSize: 96 }}>Scroll me plz</Text>
   <Text style={{ fontSize: 96 }}>Scroll me plz</Text> 
  <Text style={{ fontSize: 96 }}>Scroll me plz</Text>
   <Text style={{ fontSize: 96 }}>Scroll me plz</Text>
   <Text style={{ fontSize: 96 }}>Scroll me plz</Text>
   <Text style={{ fontSize: 96 }}>Scroll me plz</Text>
   <Text style={{ fontSize: 96 }}>Scroll me plz</Text>
   <Text style={{ fontSize: 96 }}>Scroll me plz</Text>
   <Text style={{ fontSize: 96 }}>Scroll me plz</Text>
</ScrollView>
)

Image

图片内容：<Image>，最接近 img 元素

import { Image } from "react-native";

export function MyImage() {
  return <Image source={{ uri: "https://domain.com/static/my-image.png" }} />;
}
// 本地图片的引用
const imageSource = require("../assets/my-image.png");

export function MyLocalImage() {
  return <Image source={imageSource} />;
}

FlatList

web 中等价的内容：array.map()

需要渲染一个列表的时候，web 通常会使用 map，但是出于性能原因，RN 会使用 FlatList

import {Text,FlatList,View } from 'react-native'
const posts = [
  { id: "1", name: "Post 1" },
  { id: "2", name: "Post 2" },
];
export const MyList = ()=>{
  return (
    <FlatList 
      data={posts}
      renderItem={({item})=>(
        <Text>{item.name}</Text>
      )}
      >
    </FlatList>)
}

TextInput

最接近 web 标签：<input type="text" />

react 中的 onChange 对应的是 RN 中的 onChangeText

import React, { useState } from 'react';
import { Text, TextInput, View } from 'react-native';

const PizzaTranslator = () => {
  const [text, setText] = useState('');
  return (
    <View style={{padding: 10}}>
      <TextInput
        style={{height: 40}}
        placeholder="Type here to translate!"
        onChangeText={text => setText(text)}
        defaultValue={text}
      />
      <Text style={{padding: 10, fontSize: 42}}>
        {text.split(' ').map((word) => word && '🍕').join(' ')}
      </Text>
    </View>
  );
}

export default PizzaTranslator;

TouchableOpacity

最接近 web 标签：<button>

当想通过点击时，需要使用改组件。如果享有可以在触碰时更改样式可以添加 activeOpacity 属性

import { TouchableOpacity, Text } from "react-native";

export function MyButton() {
  const onPress = () => {
    console.log("Pressed!");
  }
	return (
		<TouchableOpacity onPress={onPress} activeOpacity={0.8}>
		  <Text>Button Text</Text>
		</TouchableOpacity>
	);
}

Pressable

最接近 web 标签：<button>

和 TouchableOpacity 相似，通常用来创建 buttons，提供了对于 touch action 更高级的控制

Swithc

最接近 web 标签：<input type="radio" />

在 IOS 和 Android 中的表现是不同的

import { Switch } from "react-native";

export function MySwitch() {
  const [value, setValue] = useState(false);

    return (
      <Switch
        value={value}
        onValueChange={(value) => setValue(value)}
        trackColor={{ true: "pink" }}
      />
  );
}

参考文章

文章名	连接地址